<template>
    <div class="payment_status">
        <div class="payment_status_img">
            <img :src="info ? info.statusicon : ''" alt="">
        </div>
        <div class="payment_status_p">
            <p class="payment_status_success">{{ this.info.status }}</p>
            <p>{{ info.p1 }}</p>
            <p>{{ info.p2 }}</p>
            <p>{{ info.p3 }}</p>
        </div>
        <div class="payment_status_box" @click="loginGift()" v-if="isStatusBox">
            {{ info.boxtxt }}>>
        </div>
        <div class="payment_status_box" @click="$router.push({ name: 'user'})" v-else="isStatusBox">{{ info.boxtxt
            }}>>
        </div>
        <div class="payment_status_otherget">
            <img src="./2.png" alt="">
        </div>
        <div class="payment_status_otherget">
            <img src="./3.png" alt="">
        </div>
        <p class="payment_status_end">最终解释权归模豆商城所有</p>
    </div>
</template>

<script>
    import {setLocalStorage,getLocalStorage} from '@/utils/local-storage';
    export default {
        name: 'payment-status',
        props: {
            status: String
        },
        created() {
            // setTimeout(() => {
            //   this.$router.push({ path: '/user/order/list/0' });
            // }, 3000);
            this.statusText()
        },
        data() {
            return {
                isSuccess: true,
                info: {
                    p1: '您购买的商品将于',
                    p2: '7个工作日送到您手上',
                    p3: '敬请期待',
                    statusicon: require('./4.png'),
                    boxtxt: '查看订单'
                },
                isStatusBox: false,
                pid: ''
            };
        },
        methods: {
            statusText() {
                if (this.status == 'success') {
                    this.info.status = '支付成功'
                } else if (this.status == 'get') {
                    this.info.status = '待领取'
                    this.info.p1 = '恭喜您成为'
                    this.info.p2 = '模豆商城吉祥会员'
                    this.info.p3 = '有一份礼物免费送给您'
                    this.info.boxtxt = '登录免费领取'
                    this.info.statusicon = require('./1.png')
                    this.isStatusBox = true
                    this.pid = this.$route.query.pid
                }
            },
            loginGift() {
                setLocalStorage({pid: this.pid});
                location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx5b93f2b90f92962d&redirect_uri=' +
                    encodeURIComponent('http://www.moteer.top/#/loginbywx') + '&response_type=code&scope=snsapi_userinfo#wechat_redirect'
            }
        }
    };
</script>


<style lang="scss" scopd>
    .payment_status {
        background-color: #fff;
    }

    .payment_status_img {
        width: 100%;
        height: 120px;
        display: flex;
        justify-content: center;
    }

    .payment_status_img img {
        /*width: 160px;*/
        height: 100%;
    }

    .payment_status_p p:nth-of-type(1) {
        text-align: center;
        color: #333333;
        font-weight: bold;
        font-size: 24px;
    }

    .payment_status_p p {
        text-align: center;
        line-height: 26px;
        color: #666666;
        font-size: 15px;
    }

    .payment_status_p p:nth-of-type(2) {
        text-align: center;
        margin-top: 20px;
    }

    .payment_status_box {
        width: 80%;
        height: 50px;
        background-color: #E55480;
        border-radius: 5px;
        text-align: center;
        line-height: 50px;
        color: #ffffff;
        font-size: 15px;
        position: relative;
        left: 50%;
        margin-left: -40%;
        margin-top: 20px;
    }

    .payment_status_otherget img {
        width: 100%;
    }

    .payment_status_end {
        margin-top: 20px;
        text-align: center;
        font-size: 12px;
        color: #999999;
    }
</style>
